<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>生产订单申请修改</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText">
    <div class="apply-order" v-if="config!==null">
      <div class="apply-order-btns" style="margin-bottom:5px;text-align:center">
        <template v-if="mode==='applyUpdate'">
          <template v-if="canEdit">
            <el-button size="medium" type="primary" @click="settingPageConfig">纸张配置</el-button>
            <el-button size="medium" type="primary" @click="applyUpdateOrder">申请修改</el-button>
            <el-button size="medium" type="primary" @click="refreshOrderData">同步bom数据</el-button>
            <el-button size="medium" type="primary" @click="changeTemplate">切换模板</el-button>
            <el-button size="medium" type="primary" @click="uploadEnclosure">上传附件</el-button>
          </template>
        </template>
        <template v-else>
          <template v-if="canEdit">
            <el-button size="medium" type="primary" @click="approvalApplyOrder(1)">审核通过</el-button>
            <el-button size="medium" type="danger" @click="approvalApplyOrder(0)">退回</el-button>
          </template>
        </template>
        <el-button size="medium" type="primary" @click="lookHistoryRecord">历史记录</el-button>
      </div>
      <div class="apply-order-content" v-if="produceData!==null">
        <transition name="order-show" @after-enter="itemToScroll('new')">
          <div class="apply-order-item" v-if="oldOrderShow">
            <div class="apply-order-item-title">
              <span>原订单-对比</span>
              <span class="apply-order-item-btn" @click="updateOldOrderShow(false)">
                <i class="el-icon-d-arrow-left"></i>
              </span>
            </div>
            <div ref="oldOrderItem" class="apply-order-item-content" @scroll="itemScroll('old')">
              <order-template :config="config" :data="produceData" :is-print="true">
              </order-template>
            </div>
          </div>
        </transition>

        <div v-if="oldOrderShow" class="apply-order-interval" :style="{width:intervalWidth}"></div>
        <template v-else>
          <div class="apply-order-expand" @click="updateOldOrderShow(true)">
            <div class="apply-order-item-title" style="border-bottom:none">
              <span class="apply-order-item-btn">
                <i class="el-icon-d-arrow-right"></i>
              </span>
            </div>
            <div style="height:calc(100% - 26px);position: relative">
              <div class="apply-order-expand-text">原订单-对比</div>
            </div>
          </div>
        </template>

        <div class="apply-order-item">
          <div class="apply-order-item-title">订单编辑-请在本页修改信息</div>
          <div ref="newOrderItem" class="apply-order-item-content" @scroll="itemScroll('new')" :key="orderKey">
            <order-template ref="orderTempl" :config="newConfig" :data="newProduceData" :is-print="isPrint" :is-line="isLine"
              :is-emphasize="isEmphasize">
            </order-template>
          </div>
        </div>
      </div>
    </div>

    <el-dialog append-to-body :title="dialogTitle" :visible.sync="openDialog" top="10vh" @closed="dialogClosed">
      <div class="dialog-templ">
        <template v-if="openDialog">
          <page-setting v-if="dialogType==='pageSetting'" :config="newConfig" @setting-success="toCloseDialog">
          </page-setting>
          <approval-remark v-else-if="dialogType==='applyUpdate'" :data="dialogData" @ensure="toApplyOrder"></approval-remark>
          <approval-remark v-else-if="dialogType==='approvalApply'" :data="dialogData" @ensure="toApprovalApplyOrder"></approval-remark>
          <history-record v-else-if="dialogType==='historyRecord'" :data="historyRecordData" :order-no="sysOrderNo"></history-record>
          <upload-enclosure-form v-else-if="dialogType==='upload'" :data="dialogData"></upload-enclosure-form>
        </template>
      </div>
    </el-dialog>

    <el-dialog fullscreen append-to-body class="dialog-fullscreen" title="请选择模板" :visible.sync="openChangeTempl" :close-on-click-modal="false"
      :close-on-press-escape="false">
      <div style="height:100%;overflow:auto">
        <change-order-template v-if="openChangeTempl" type="change" @ensure="toChangeTemplate"></change-order-template>
      </div>
    </el-dialog>
  </div>
</body>

<script src="https://upload.shinehao.com.cn/20181222140744qiniu.min.js"></script>
<script src="https://upload.shinehao.com.cn/20190416085621dom-to-image.min.js"></script>
<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/static/vue-drag-resize/vue-drag-resize.css",
    "/vueSystem/components/css/richEditor.css",
    "/vueSystem/components/css/formGroup.css",
    "/vueSystem/components/css/checkGroup.css",
    "/vueSystem/components/css/showTextarea.css",
    "./components/css/sysDragResize.css",
    "./css/orderInfoSettingDialog.css",
    "./css/orderInfoSetting.css",
    "./css/materialColorSettingDialog.css",
    "./css/materialColorSetting.css",
    "./css/materialSettingDialog.css",
    "./css/materialSetting.css",
    "./css/otherTableItem.css",
    "./css/dragTableSetting.css",
    "./css/pageSetting.css",
    "./css/orderTemplate.css",
    "./css/historyRecord.css",
    "./css/uploadEnclosureForm.css",
    "./css/changeOrderTemplate.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/static/vue-drag-resize/index.js",
    "/static/vue/qrcode.min.js",
    "/vueSystem/directives/clickoutside.js",
    "/vueSystem/components/formGroup.js",
    "/vueSystem/components/checkGroup.js",
    "/vueSystem/components/showTextarea.js",
    "/vueSystem/models/baseModel.js"
  ]);
  importRichEditorFiles([
    "/vueSystem/components/richEditor.js"
  ]);

</script>

<script src="./models/produceMaterialData.js"></script>
<script src="./models/classifyMaterialData.js"></script>
<script src="./models/produceOrderData.js"></script>
<script src="./models/subsidiaryMaterialData.js"></script>
<script src="./models/materialColorData.js"></script>

<script src="./models/orderInfoConfig.js"></script>
<script src="./models/produceOrderTemplConfig.js"></script>
<script src="./models/materialColorConfig.js"></script>
<script src="./models/materialConfig.js"></script>
<script src="./models/dragConfig.js"></script>
<script src="./mixins/tableResizeMixin.js"></script>

<script src="./components/sysDragResize.js"></script>
<script src="./orderInfoSettingDialog.js"></script>
<script src="./orderInfoSetting.js"></script>
<script src="./materialColorSettingDialog.js"></script>
<script src="./materialColorSetting.js"></script>
<script src="./materialSettingDialog.js"></script>
<script src="./materialSetting.js"></script>
<script src="./otherTableItem.js"></script>
<script src="./dragTableSetting.js"></script>

<script src="./approvalRemark.js"></script>
<script src="./pageSetting.js"></script>
<script src="./orderTemplate.js"></script>
<script src="./historyRecord.js"></script>
<script src="./uploadEnclosureForm.js"></script>
<script src="./changeOrderTemplate.js"></script>

<script src="./moduleUtil.js"></script>

<script>
  var app = new Vue({
    el: '#app',

    data: function () {
      return {
        loading: false,
        loadingText: '',
        config: null,
        produceData: null,
        newConfig: null,
        newProduceData: null,
        mode: '',
        openDialog: false,
        dialogTitle: '',
        dialogType: '',
        dialogData: null,
        isPrint: false,
        isLine: true,
        isEmphasize: false,
        oldOrderShow: true,
        timeout: null,
        intervalWidth: '6px',
        orderKey: SysUtil.getId(),
        historyRecordData: {},
        sysOrderNo: '',
        applyId: '',
        canEdit: true,
        eventSource: null,
        openChangeTempl: false
      };
    },

    created: function () {
      var self = this;
      this.initData().then(function () {
        self.checkEditRunning();
      });
    },

    beforeDestroy: function () {
      var eventSource = this.eventSource;
      if (eventSource !== null) {
        eventSource.close();
      }
    },

    methods: {
      initData: function () {
        var param = SysUtil.getPathParam();
        var mode = param.mode;
        this.mode = mode;
        this.sysOrderNo = param.sysOrderNo;
        if (mode === 'approvalApply') {
          this.isPrint = true;
          this.isEmphasize = true;
          this.applyId = param.applyId;
        }

        this.loading = true;
        var self = this;
        return ModuleUtil.getProductOrderForApply(param).then(function (res) {
          self.config = res.config;
          self.produceData = res.orderData;
          self.newConfig = res.newConfig;
          self.newProduceData = res.newOrderData;
          self.loading = false;
          self.$nextTick(function () {
            self.setCalIntervalWidthEvent();
          });
        }).catch(function (error) {
          console.log('error', error);
          self.loading = false;
        });
      },

      setCalIntervalWidthEvent: function () {
        this.calIntervalWidth();
        var self = this;

        $('.apply-order').resize(function () {
          self.calIntervalWidth();
        });
      },

      calIntervalWidth: function () {
        var totalWidth = $('.apply-order').width();
        if (totalWidth % 2 === 0) {
          this.intervalWidth = '6px';
        } else {
          this.intervalWidth = '5px';
        }
      },

      settingPageConfig: function () {
        this.dialogTitle = '纸张设置';
        this.dialogType = 'pageSetting';
        this.openDialog = true;
      },

      uploadEnclosure: function () {
        this.dialogTitle = '上传附件';
        this.dialogType = 'upload';
        this.dialogData = {
          sysOrderNo: this.sysOrderNo
        };
        this.openDialog = true;
      },

      lookHistoryRecord: function () {
        this.dialogTitle = '历史记录';
        this.dialogType = 'historyRecord';
        this.openDialog = true;
      },

      toCloseDialog: function () {
        this.openDialog = false;
      },

      dialogClosed: function () {
        this.dialogTitle = '';
        this.dialogType = '';
        this.dialogData = null;
      },

      updateOldOrderShow: function (flag) {
        this.oldOrderShow = flag;
      },

      itemScroll: function (type) {
        var timeout = this.timeout;
        if (timeout !== null) {
          clearTimeout(timeout);
        }

        var self = this;
        timeout = setTimeout(function () {
          self.itemToScroll(type);
          self.timeout = null;
        }, 5);
        this.timeout = timeout;
      },

      itemToScroll: function (type) {
        var $scrollItem, $item;
        if (type === 'new') {
          if (this.$refs['oldOrderItem'] === undefined) {
            return;
          }
          $scrollItem = $(this.$refs['oldOrderItem']);
          $item = $(this.$refs['newOrderItem']);
        } else {
          $scrollItem = $(this.$refs['newOrderItem']);
          $item = $(this.$refs['oldOrderItem']);
        }
        var scrollTop = $item.scrollTop();
        var scrollLeft = $item.scrollLeft();
        $scrollItem.scrollTop(scrollTop);
        $scrollItem.scrollLeft(scrollLeft);
      },

      refreshOrderData: function () {
        var newOrderData = this.newProduceData;
        var newConfig = this.newConfig;
        this.loading = true;
        var self = this;
        ModuleUtil.getRefreshBusniessData(newConfig, newOrderData).then(function (productOrderData) {
          self.newProduceData = productOrderData;
          self.loading = false;
          self.orderKey = SysUtil.getId();
        }).catch(function () {
          self.loading = false;
        });
      },

      applyUpdateOrder: function () {
        this.isPrint = true;
        var self = this;
        this.$nextTick(function () {
          if (!self.checkValid()) {
            self.isPrint = false;
            return;
          }

          self.dialogTitle = '备注';
          self.dialogType = 'applyUpdate';
          self.dialogData = {};
          self.openDialog = true;
          self.isPrint = false;
        });
      },

      checkValid: function () {
        var config = this.config;
        var code = config.checkValid();
        if (code !== '') {
          var msg = i18n.getMsg(`produceOrder.error.${code}`);
          this.$alert(msg);
          return false;
        }

        if (!this.$refs.orderTempl.checkValid()) {
          return false;
        }

        var produceData = this.produceData;
        code = produceData.checkValid();
        if (code !== '') {
          var msg = i18n.getMsg(`produceOrder.error.${code}`);
          this.$alert(msg);
          return false;
        }

        return true;
      },

      toApplyOrder: function (data, remark) {
        var config = this.newConfig;
        var produceData = this.newProduceData;
        var option = {
          oldData: this.produceData,
          remark: remark
        };

        this.loading = true;
        var self = this;
        ModuleUtil.toApplyUpdateProduceOrder(config, produceData, option, this).then(function () {
          self.loading = false;
          self.loadingText = '';
          self.openDialog = false;
          self.$alert('申请修改成功', '信息', {
            callback: function () {
              self.jumpTo();
            }
          });
        }).catch(function () {
          self.loading = false;
          self.loadingText = '';
        });
      },

      approvalApplyOrder: function (status) {
        this.dialogTitle = '备注';
        this.dialogType = 'approvalApply';
        this.dialogData = {
          status: status
        };
        this.openDialog = true;
      },

      toApprovalApplyOrder: function (data, remark) {
        var status = data.status;
        var produceData = this.produceData;
        var option = {
          remark: remark,
          status: status,
          applyId: this.applyId
        };

        if (status === 1) {
          option.el = this.$refs['orderTempl'].$el;
          this.isLine = false;
          this.isEmphasize = false;
        }

        var self = this;
        this.$nextTick(function () {
          self.loading = true;
          ModuleUtil.approvalApplyProduceOrder(produceData, option, this).then(function (resMsg) {
            if (typeof resMsg === 'string') {
              self.$alert(resMsg, '信息');
            } else {
              var msg = '';
              if (status === 1) {
                msg = '成功审核通过';
              } else if (status === 0) {
                msg = '成功退回';
              }
              self.$alert(msg, '信息', {
                callback: function () {
                  self.jumpTo();
                }
              });
              self.openDialog = false;
            }
            self.isLine = true;
            self.isEmphasize = true;
            self.loading = false;
          }).catch(function (errorMsg) {
            if (typeof errorMsg === 'string') {
              self.$alert(errorMsg, '信息');
            }
            self.loading = false;
            self.isLine = true;
            self.isEmphasize = true;
          });
        });
      },

      checkEditRunning: function () {
        if (window.EventSource) {
          var basePath = SysUtil.getBasePath();
          var sysOrderNo = this.sysOrderNo;
          var source = new EventSource(basePath + '/sse/isOperateOrder?orderNo=' + sysOrderNo);

          var self = this;
          source.addEventListener('message', function (e) {
            var data = e.data;
            if (data.length === 0) {
              return;
            }

            if (self.canEdit) {
              self.canEdit = false;
              self.isPrint = true;
              var jsonData = JSON.parse(data);
              self.$alert("当前订单已经由 [" + jsonData.loginUserName + "] 操作中,您当前只有查看功能");
            }
          });

          source.addEventListener('error', function (e) {
            if (e.readyState === EventSource.CLOSED) {
              console.log("Connection is closed");
            }
          }, false);
          self.eventSource = source;
        } else {
          this.$alert("Your web browser dosen't support EventSource.");
        }
      },

      changeTemplate: function () {
        this.openChangeTempl = true;
      },

      toChangeTemplate: function (templId) {
        this.loading = true;
        var self = this;
        ModuleUtil.getProductOrderTemplate(templId).then(function (config) {
          var newProduceData = self.newProduceData;
          newProduceData.changeOrderTemplate(config);
          self.newConfig = config;
          self.orderKey = SysUtil.getId();
          self.loading = false;
          self.openChangeTempl = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      jumpTo: function () {
        var $parent = $(window.parent.document);
        if ($parent.is(document)) {
          return;
        }

        var jumpUrl = "orderlist.html";
        var $jumpHtml = $parent.find(`#min_title_list li span[data-href='${jumpUrl}']`);
        if ($jumpHtml.length === 0) {
          $parent.find(`li a[data-href='${jumpUrl}']`)[0].click();
          this.closePage($parent);
        } else {
          var $page = $jumpHtml.parents('li');
          this.closePage($parent);
          $page[0].click();
        }
      },

      closePage: function ($parent) {
        var htmlUrl = "./bomBusiness/produceOrder/applyOrder.html";
        var $page = $parent.find(`#min_title_list li span[data-href='${htmlUrl}']`);
        if ($page.length > 0) {
          $page.next().click();
        }
      },
    },

    components: {
      PageSetting: PageSetting,
      OrderTemplate: OrderTemplate,
      ApprovalRemark: ApprovalRemark,
      HistoryRecord: HistoryRecord,
      UploadEnclosureForm: UploadEnclosureForm,
      ChangeOrderTemplate: ChangeOrderTemplate
    }
  });

</script>

<style>
  .apply-order {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    overflow: auto;
  }

  .apply-order .apply-order-content {
    position: relative;
    overflow: auto;
    height: calc(100% - 41px);
    display: flex;
  }

  .apply-order .apply-order-content>.apply-order-item {
    flex: 1;
    overflow: auto;
    height: calc(100% - 2px);
    border: 1px solid #95B8E7;
  }

  .apply-order .apply-order-content>.apply-order-interval {
    height: calc(100% - 2px);
    background: #E6EEF8;
    border-top: 1px solid #95B8E7;
    border-bottom: 1px solid #95B8E7;
  }

  .apply-order .apply-order-content>.apply-order-expand {
    width: 26px;
    height: calc(100% - 2px);
    border: 1px solid #95B8E7;
    border-right: none;
    background: #E5EFFF;
    cursor: pointer;
  }

  .apply-order .apply-order-content>.apply-order-expand .apply-order-expand-text {
    font-size: 12px;
    font-weight: bold;
    color: #0E2D5F;
    line-height: 16px;
    transform: rotate(90deg);
    white-space: nowrap;
    padding-left: 10px;
  }

  .apply-order .apply-order-item-title {
    padding: 0 5px;
    height: 26px;
    line-height: 26px;
    background: #E5EFFF;
    border-bottom: 1px solid #95B8E7;
    color: #0E2D5F;
    font-size: 12px;
  }

  .apply-order .apply-order-item-title .apply-order-item-btn {
    float: right;
    cursor: pointer;
    color: #67AEE5;
    font-size: 16px;
  }

  .apply-order .apply-order-item-content {
    height: calc(100% - 27px);
    position: relative;
    overflow: auto;
  }

  .dialog-templ {
    height: calc(80vh - 54px);
    overflow: auto;
  }

  .order-show-leave-to,
  .order-show-enter {
    margin-left: calc(-100% + 26px);
  }

  .order-show-leave-active,
  .order-show-enter-active {
    transition: margin-left .5s;
  }

</style>

</html>
